<template>
    <div class="sensorAno">
        <el-button size="small" type="primary" @click="doOpen">
            {{ sensor_name ? sensor_name : defaultText }}
        </el-button>
        <el-dialog :visible.sync="isShow" width="400px" :lock-scroll="true" :show-close="true">
            <div class="list">
                <div class="item left">
                    <el-select v-model="sel_id" placeholder="请选择" @change="handleSensor">
                        <el-option v-for="item in sensor_ano_list" :key="item.id" :label="item.sensor_name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="item right">
                    <trend :tableList=tableList @handleRowClick="getTime" />
                </div>
            </div>
            <div class="buttons">
                <el-button type="primary" size="small" @click="submit">
                    提交
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { requestApi } from '@/requset/api'
import trend from './trend.vue'
import { getTime } from 'zrender/lib/animation/Animation'
export default {
    data() {
        return {
            defaultText: "请选择测点",
            tableList: [],
            isShow: false,
            sensor_ano_sel: null,
            sel_id: null,
            sensor_ano_list: [],
            timeSelect: null,
            sensor_name: null
        }
    },
    props: {
        sensorInfo: {
            type: Object,
            default() {
                return null
            }
        },
        datetime: {
            type: Array,
            default() {
                return []
            }
        },
        wave_type: {
            type: Object,
            default() {
                return null
            }
        }
    },
    components: {
        trend
    },
    methods: {
        doOpen() {
            this.getSensorAno().then(() => {
                this.isShow = true
            })


        },
        getTimelist(obj) {
            requestApi('post', 'diag/wave/time', obj, false)
                .then((res) => {
                    if (res.data.code == 0) {
                        let list = res.data.data
                        if (list.length > 0) {
                            list.forEach((e) => {
                                let { id, value, note } = e
                                let time = Number(id.split('_')[id.split('_').length - 1])
                                this.tableList.unshift({
                                    id,
                                    time: this.dayjs(time * 1000).format('YYYY-MM-DD HH:mm:ss'),
                                    value,
                                    note,
                                })
                            })
                        }
                    }
                })
        },
        getTime(e) {
            this.timeSelect = e
        },
        getSensorAno() {
            let { device_id, id } = this.sensorInfo
            return requestApi("post", "diag/other", { device_id, id }, false).then(res => {
                if (res.data.code == 0) {
                    this.sensor_ano_list = res.data.data
                    this.sensor_ano_sel = this.sensor_ano_list.length > 0 && this.sensor_ano_sel ? this.sensor_ano_list[0] : null
                } else this.sensor_ano_list = []
            })
        },
        getChannel(address) {
            const parts = address.split('_')
            const firstNumber = parts[0]
            const secondNumber = parts[1] ? parts[1] : 0
            return [firstNumber.toString(), secondNumber.toString()]
        },
        handleSensor(e) {
            let eigkey = 'rms'

            let { proj_no } = this.sensorInfo
            let { address, axial, port, id, sensor_name } = this.sensor_ano_list.filter(e => e.id == this.sel_id)[0]

            let arr1 = this.getChannel(address)
            let obj = {
                saddr: arr1[0],
                channel: arr1[1],
                sport: port,
                axial,
                proj_no,
                wave_type: this.wave_type.value,
                stime: this.dayjs(this.datetime[0]).unix(),
                etime: this.dayjs(this.datetime[1]).unix(),
                eigkey: `${this.wave_type.value}_${eigkey}`,
            }

            return requestApi('post', 'diag/wave/time', obj, false)
                .then((res) => {
                    if (res.data.code == 0) {
                        let list = res.data.data
                        if (list.length > 0) {
                            list.forEach((e) => {
                                let { id, value, note } = e
                                let time = Number(id.split('_')[id.split('_').length - 1])
                                this.tableList.unshift({
                                    id,
                                    time: this.dayjs(time * 1000).format('YYYY-MM-DD HH:mm:ss'),
                                    value,
                                    note,
                                })
                            })
                        }
                    }
                })
        },

        submit() {
            if (!this.timeSelect) {
                this.$message.info("请选择采样时间节点")
                return
            }
            this.sensor_name = this.sensor_ano_list.filter(e => e.id == this.sel_id)[0].sensor_name
            this.$emit("setCep",
                this.timeSelect
            )
            this.isShow = false
        },
        clearLabel() {
            this.$set(this, "sensor_name", null)
            this.sel_id = null
            this.tableList.splice(0, this.tableList.length)
        }
    },
    created() {

    }
}
</script>

<style lang="less" scoped>
.sensorAno {
    width: 96%;


    margin-left: 2%;

    .list {
        width: 100%;
        height: 60vh;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        .item {
            width: 80%;
            height: 100%;

            .group1 {
                display: flex;
                flex-direction: column;
                padding: 4px 10px;

                .el-radio {
                    margin-bottom: 4px;
                }
            }
        }

        .left {
            height: 50px;
        }

        .right {
            height: calc(100% - 60px);
        }
    }

}
</style>
